<template>
    <div class="app-container">
      <!--创建文章-->
      <div  v-loading="loading">
        <el-form :model="ruleForm" :rules="rules" ref="ruleForm" label-width="100px" class="demo-ruleForm">
          <el-form-item label="文章标题" prop="title">
            <el-input v-model="ruleForm.title" maxlength="50"></el-input>
          </el-form-item>

          <el-form-item label="作者" prop="author">
            <el-input v-model="ruleForm.author" style="width: 200px" maxlength="20"></el-input>
          </el-form-item>

          <el-form-item label="文章摘要" prop="abstract">
            <el-input type="textarea" v-model="ruleForm.abstract" maxlength="500"></el-input>
          </el-form-item>

          <el-form-item label="正文">
            <tinymce :height="400" v-model="ruleForm.content" id='tinymce'></tinymce>
          </el-form-item>

          <el-form-item>
            <el-button type="primary" @click="submitForm('ruleForm')">保存</el-button>
            <el-button @click="reLoad">取消</el-button>
          </el-form-item>
        </el-form>
      </div>

      <div>

      </div>

    </div>
</template>

<script>
  import tinymce from '@/components/Tinymce'
  import { addArticle,checkarticletil,articleinfo } from '@/api/data'
  import { DataTimeFormat } from '@/utils/index'
    export default {
      name: "add-nes",
      props:{
        id:{
          type: String,
          default: '',
        }
      },
      components:{
        tinymce
      },
      data() {
        return {
          loading: false,
          ruleForm: {
            id_number:'',
            title: '',
            author: '',
            abstract:'',
            content:'',
          },
          rules: {
            title: [
              { required: true, message: '请输入标题', trigger: 'blur' },
            ],
            author:[],
            abstract:[
              { required: true, message: '请输入摘要', trigger: 'blur' },
            ]
          },
          content:'',
        };
      },
      mounted(){
        this.AnLoad();
      },
      methods: {

        AnLoad(){
          if(this.id != ''){
            this.GetData();
          }
        },

        GetData(){
          this.loading = true;
          let id = parseInt(this.id);
          articleinfo(id).then(res=>{
            this.loading = false;
            this.ruleForm = res.data;
          })

        },

        submitForm(formName) {
          this.$refs[formName].validate((valid) => {
            if (valid) {

              let nd = this.ruleForm;
              nd.updata_time = DataTimeFormat('yyyy-MM-dd HH:mm:ss');
              if(nd.id != ''){      //修改
                addArticle(nd).then(res=>{
                  this.$message.success('修改成功！');
                  setTimeout(()=>{
                    this.$router.push({ path: 'news' })
                  },300)
                })
              }else{      //新增
                checkarticletil(this.ruleForm.title).then(nes=>{
                  addArticle(nd).then(res=>{
                    this.$message.success('添加成功！');
                    setTimeout(()=>{
                      this.$router.push({ path: 'news' })
                    },300)
                  })
                })
              }

            } else {
              console.log('error submit!!');
              return false;
            }
          });
        },

        resetForm(formName) {
          this.$refs[formName].resetFields();
          this.content = '';
        },

        reLoad(){   //取消
          this.$router.push({ path: 'news' })
        },

      }
    }
</script>

<style scoped>

</style>
